<template>
	<div class="mobileIndex">
		<div class="mobileIndex-le">
			<div>
				<a-alert :message='i18n("tips","点击+插入到手机界面，手机里被删除的会显示在下方")' type="info" show-icon />
				<div class="mobileIndex-le-head">{{i18n("columnManage","栏目管理")}}</div>
			</div>
			<div class="mobileIndex-le-list">
				<div v-for="(obj,index) in mobileComponents" :key="index">
					<div class="mobileIndex-list" v-if="!layoutId.includes(obj.id)" @click="add(obj)">
						<rx-icon-show :icon="obj.icon"></rx-icon-show>
						<div class="mobileIndex-list-content">{{obj.title}}</div>
						<rx-icon-show icon="icon-lineVue3_add"></rx-icon-show>
					</div>
				</div>
			</div>
		</div>
		<div class="mobileIndex-content">
			<div class="mobile-content">
				<div class="mobile-content-layout">
					<mobile-content @editObj="editObj" @deleteObj="deleteObj" @resizedEvent="resizedEvent" :readOnly="readOnly" :moduleid="moduleid" :mobileLayout="mobileLayout" :screenConfig="screenConfig" :keyShow="keyShow" :screenView="screenView"></mobile-content>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import allComponents from "@/views/modules/design/js/all-components.js";
import MobileContent from "./mobile-content.vue"
export default {
	name: "MobileIndex",
	props:['screenConfig','screenView','mobileConfig'],
	components: {
        MobileContent
	},
	data() {
		return {
			layoutId: [],
			mobileComponents:[],
			mobileLayout:[],
			componentList: allComponents,
			keyShow: new Date().getTime(),
			moduleid:'',
			readOnly:true,
		}
	},
	mounted(){
		this.init()
	},
	methods:{
		i18n(name,text,key){
			return this.$ti18(name,text,"mobileIndexLang",key);
		},
		init(){
			this.screenConfig.components.filter(res=>{
				if(res.child){
					res.child.filter(childObj=>{
						if(childObj.type !=('image','iconfont')){
							let icon = this.getIcon(this.componentList, childObj.type, childObj.config.chartType);
                            childObj.config["icon"]=icon;
                            childObj.config["id"]=childObj.id;
                            childObj.config["type"]=childObj.type;
							this.mobileComponents.push(childObj.config)
						}
					})
				}else if(res.type !=('image','iconfont')){
					let icon = this.getIcon(this.componentList, res.type, res.config.chartType);
                    res.config["icon"]=icon;
                    res.config["id"]=res.id;
                    res.config["type"]=res.type;
					this.mobileComponents.push(res.config)
				}
			})
			if(this.mobileConfig){
				this.mobileLayout = JSON.parse(JSON.stringify(this.mobileConfig))
				this.mobileLayout.filter(res=>{
					this.layoutId.push(res.config.key)
				})
			}
		},
		//添加mobile数据
		add(obj){
			let time = new Date().getTime()
			let config  = {
				x: 0,
				y: 0,
				w: 25,
				h: 20,
				i:time,
				config: {
					key:obj.key
				},
				active: false,
				main: false,
			}
			this.mobileLayout.push(config);
			this.layoutId.push(obj.id)
		},
		//删除
		deleteObj(id){
			this.mobileLayout.splice(id, 1);
			this.layoutId.splice(id, 1)
		},
		//选中编辑
		editObj(item){
			this.moduleid =item.config.id;
		},
		resizedEvent(list){
			list.filter(obj=>{
				this.mobileLayout.filter(type=>{
					if(obj.config.key ==type.config.key){
						type.h = obj.h
					}
				})
			})
			this.keyShow = new Date().getTime();
		},
		getIcon(componentList, type, chartType) {
			let icon = "";
			if (type == "chart") {
				for (let i = 0; i < componentList.length; i++) {
					if (componentList[i].chartType && componentList[i].chartType == chartType) {
						icon = componentList[i].icon;
						break;
					}
					if (componentList[i].childList && componentList[i].childList.length > 0) {
						icon = this.getIcon(componentList[i].childList, type, chartType);
						if (icon) {
							break;
						}
					}
				}
			} else {
				for (let i = 0; i < componentList.length; i++) {
					if (componentList[i].type == type) {
						icon = componentList[i].icon;
						break;
					}
					if (componentList[i].childList && componentList[i].childList.length > 0) {
						icon = this.getIcon(componentList[i].childList, type, "");
						if (icon) {
							break;
						}
					}
				}
			}
			return icon;
		},
	},
	watch:{
		mobileLayout:{
			handler(){
				this.$emit('mobileObj',this.mobileLayout)
			},
			deep:true
		}
	}
}
</script>
<style scoped>
.mobile-content-layout{
	width: 100%;
	margin-top: 25px;
	height:calc(100% - 37px);
	padding-top: 10px;
	overflow: hidden;
}
.mobileIndex{
	display: flex;
	width: 100%;
	height: 100%;
}
.mobileIndex-le{
	width:500px;
	padding: 20px;
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
}
.mobileIndex-content{
	flex: 1;
	background: #eff1f5;
	padding: 50px 0px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mobileIndex-le-head{
	color: #333333;
	font-size: 14px;
	font-weight: bold;
	margin-top: 30px;
}
.mobileIndex-le-list{
	flex: 1;
	overflow: auto;
}
.mobileIndex-list{
	height: 40px;
	background-color: #ffffff;
	border-radius: 4px;
	border: solid 1px #dadde0;
	margin-top: 10px;
	display: flex;
	align-items: center;
	padding: 0px 12px;
	cursor: pointer;
}
.mobileIndex-list:hover{
	border: solid 1px #4285f4;
}
.mobileIndex-le-list::-webkit-scrollbar{
	width: 0px!important;
}
.mobileIndex-list i:nth-child(1){
	font-size: 22px;
	margin-right: 8px;
}
.mobileIndex-list i:nth-child(3){
	color: #4285f4;
}
.mobileIndex-list-content{
	flex: 1;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	margin-right: 10px;
}
.mobile-content{
	width: 380px;
	height: 100%;
	padding:10px ;
	background-image: url("@img/mobile.png");
	background-size: 100% 100%;
}
</style>
